<template>
  <div ref="container" class="container" style="font-size: 14px">
    <el-row style="margin: 10px;" :gutter="10">
      <el-col :span="5">
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="8">违禁品名称:</el-col>
          <el-col :span="16"><el-input v-model="form.name" placeholder="请输入违禁品名称" size="mini" style="display:inline" /></el-col>
        </el-row>

      </el-col>
      <el-col :span="5">
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="6">开始时间:</el-col>
          <el-col :span="18">
            <el-date-picker
              v-model="form.timeMap.startTime"
              type="datetime"
              size="mini"
              placeholder="选择日期时间"
              style="width: 100%"
            />
          </el-col>
        </el-row>

      </el-col>
      <el-col :span="5">
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="6">结束时间:</el-col>
          <el-col :span="18">
            <el-date-picker
              v-model="form.timeMap.endTime"
              type="datetime"
              size="mini"
              placeholder="选择日期时间"
              style="width: 100%"
            />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5">
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="6">作业地点:</el-col>
          <el-col :span="18"> <el-input v-model="form.place" placeholder="请输入作业地点" size="mini" style="display:inline" /></el-col>
        </el-row>
      </el-col>
      <el-col :span="2" :offset="0.5">
        <el-row type="flex" justify="center" align="middle">
          <el-button type="primary" size="small" @click="dataStatistics">查询</el-button>
        </el-row>
      </el-col>
    </el-row>

    <el-row style="margin: 10px;" :gutter="10">
      <el-col :span="12">

        <div ref="chart1" :class="className" :style="{height:height}" />

      </el-col>
      <!--      <el-col :span="8">-->
      <!--        <div ref="chart2" :class="className" :style="{height:height}" />-->
      <!--      </el-col>-->
      <el-col :span="12">
        <div ref="chart3" :class="className" :style="{height:height}" />
      </el-col>
    </el-row>

  </div>
</template>
<script>

import { statistic } from '@/api/dataQueryAndStatistics'
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: window.innerHeight / (1.3) + 'px'

    }
  },
  data() {
    return {
      tableData: [], // 数据表格里的数据后台请求过来生成
      input: '', // 查询输入框内容
      screenWidth: (6 / 7) * window.innerWidth,
      screenHeight: (6 / 7) * window.innerHeight,
      fontSize: '14px',

      form: {
        name: '',
        // startTime: '',
        // endTime: '',
        timeMap: {
          startTime: '',
          endTime: ''
        },
        place: ''
      },
      chart1: '',
      chart2: '',
      chart3: ''
    }
  },
  computed: {

    textStyle() {
      return 'fontSize:' + (this.screenWidth / 100 + 2 + 'px')
    }

  },
  watch: {

  },
  created() {

  },
  mounted() {
    this.dataStatistics()
    this.listenResizeEvent()
    this.initChart()
  },
  methods: {
    handleResize() {
      this.screenWidth = (6 / 7) * window.innerWidth
    },
    listenResizeEvent() {
      window.addEventListener('resize', this.handleResize)
    },
    removeResizeEvent() {
      window.removeEventListener('resize', this.handleResize)
    },

    dataStatistics() {
      this.form.timeMap.startTime = new Date(this.form.timeMap.startTime).getTime()
      this.form.timeMap.endTime = new Date(this.form.timeMap.endTime).getTime()
      if (isNaN(this.form.timeMap.startTime)) {
        this.form.timeMap.startTime = ''
      }
      if (isNaN(this.form.timeMap.endTime)) {
        this.form.timeMap.endTime = ''
      }
      statistic(this.form).then(response => {
        console.log(response)
        this.initChart(response.data)
      }).catch(e => {
        console.log(e)
      })
    },
    initChart(data) {
      if (this.chart1 !== '') { this.chart1.clear() }
      if (this.chart2 !== '') { this.chart2.clear() }
      if (this.chart3 !== '') { this.chart3.clear() }

      this.chart1 = echarts.init(this.$refs.chart1)
      // this.chart2 = echarts.init(this.$refs.chart2)
      this.chart3 = echarts.init(this.$refs.chart3)

      // 重新排序
      const timeKeys = Object.keys(data.time).map(key => new Date(key)).sort((a, b) => a - b)
      const sortedTimeData = timeKeys.map(date => {
        return {
          date: date.toISOString().split('T')[0],
          value: data.time[date.toISOString().split('T')[0]]
        }
      })

      const option1 = {
        title: {
          text: '按违禁品名称统计'
        },
        tooltip: {},
        legend: {
          data: ['数量']
        },
        xAxis: {
          data: Object.keys(data.name)
          // // 网格样式
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     color: ['#262732'],
          //     width: 1,
          //     type: 'solid',
          //   },
          // },
          // axisLine: {   //横轴样式
          //   lineStyle: {
          //     color: '#ffffff',
          //   },
          // },
        },
        yAxis: {
          // // 网格样式
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     color: ['#262732'],
          //     width: 1,
          //     type: 'solid',
          //   },
          // },
          // axisLine: {   //纵轴样式
          //   lineStyle: {
          //     color: '#ffffff',
          //   },
          // },
        },
        series: [{
          name: '数量',
          type: 'bar',
          data: Object.values(data.name),
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 12
                }
              },
              // barWidth:15,
              color: '#63c2ff',
              barBorderRadius: [10, 10, 0, 0] // （顺时针左上，右上，右下，左下）
            }
          }
        }]
      }

      // const option2 = {
      //   title: {
      //     text: '按作业地点统计'
      //   },
      //   tooltip: {},
      //   legend: {
      //     data: ['数量']
      //   },
      //   xAxis: {
      //     data: Object.keys(data.place)
      //   },
      //   yAxis: {},
      //   series: [{
      //     name: '数量',
      //     type: 'bar',
      //     data: Object.values(data.place),
      //     itemStyle: {
      //       normal: {
      //         label: {
      //           show: true, // 开启显示
      //           position: 'top', // 在上方显示
      //           textStyle: { // 数值样式
      //             color: 'black',
      //             fontSize: 16
      //           }
      //
      //         },
      //         color: '#d87a80',
      //         barBorderRadius: [10, 10, 0, 0] // （顺时针左上，右上，右下，左下）
      //       }
      //     }
      //   }]
      //
      // }

      const option3 = {
        title: {
          text: '按时间统计'
        },
        tooltip: {},
        legend: {
          data: ['数量']
        },
        xAxis: {
          data: sortedTimeData.map(item => item.date)
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: sortedTimeData.map(item => item.value),
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }

              },
              color: '#ffb980',
              barBorderRadius: [10, 10, 0, 0] // （顺时针左上，右上，右下，左下）
            }
          }
        }]

      }

      // 使用刚指定的配置项和数据显示图表。
      this.chart1.setOption(option1, true)
      // this.chart2.setOption(option2, true)
      this.chart3.setOption(option3, true)
      window.addEventListener('resize', () => {
        this.height = window.innerHeight / (1.3) + 'px'
        setTimeout(() => {
          this.chart1.resize()
          this.chart1.clear()
          this.chart1.setOption(option1, true)
          // this.chart2.resize()
          // this.chart2.clear()
          // this.chart2.setOption(option1, true)
          this.chart3.resize()
          this.chart3.clear()
          this.chart3.setOption(option3, true)
        })
      })
    }
  }
}

</script>

<style>
.container {
  font-size: 12px;

  height: 100%;
  box-sizing: border-box ;
}

</style>

